<?php include_once ROOT . '/views/layouts/header.php'; ?>

    <section class="bg-blue-500 text-white   body-font bg-green-700">
        <div class="container px-5 py-8 mx-auto flex justify-center">
            <div class="bg-yellow-400 shadow overflow-hidden sm:rounded-lg w-9/12">
                <div class="px-4 py-5 sm:px-6">
                    <h3 class="text-lg leading-6 font-medium text-gray-50">
                        Информация о профиле
                    </h3>
                    <p class="mt-1 max-w-2xl text-sm text-gray-200">
                        Просмотр и изменение персональных данных.
                    </p>
                </div>
                <div class="border-t border-gray-700">
                    <dl>
                        <div class="flex items-center">
                            <div class="flex-none px-4 justify-center w-4/12 sm:w-3/12">
                                <img
                                        src="<?= $profile->avatar ?>"
                                        alt="..."
                                        class="rounded max-w-full h-auto object-contain align-middle border-none"
                                />
                            </div>
                            <div class="flex-grow border-l border-gray-700">
                                <div class="bg-yellow-400 px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
                                    <dt class="text-sm font-medium text-gray-50">
                                        Имя
                                    </dt>
                                    <dd class="mt-1 text-sm text-gray-200 sm:mt-0 sm:col-span-2"
                                        <?php if (isset($profile->color)): ?>
                                            style="color: <?= $profile->color ?>;"
                                        <?php endif; ?>
                                    >
                                        <?= $profile->username; ?>
                                    </dd>
                                </div>
                                <div class="border-t border-indigo-500 bg-yellow-400 px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
                                    <dt class="text-sm font-medium text-white-50">
                                        Ваш email
                                    </dt>
                                    <dd class="mt-1 text-sm text-gray-200 sm:mt-0 sm:col-span-2">
                                        <?= $profile->email; ?>
                                    </dd>
                                </div>
                                <div class="border-t border-indigo-500 bg-yellow-400 px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
                                    <dt class="text-sm font-medium text-gray-50">
                                        Должность
                                    </dt>
                                    <dd class="mt-1 text-sm text-gray-200 sm:mt-0 sm:col-span-2">
                                        <?= $profile->role; ?>
                                    </dd>
                                </div>
                            </div>
                        </div>

                        <div class="bg-yellow-400 border-t border-gray-700 px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
                            <dt class="text-sm font-medium text-gray-50">
                                О себе
                            </dt>
                            <dd class="mt-1 text-sm text-gray-200 sm:mt-0 sm:col-span-2">
                                <?= $profile->about; ?>
                            </dd>
                        </div>
                        <div class="bg-yellow-400 px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
                            <dt class="text-sm font-medium text-gray-50">
                                Документы
                            </dt>
                            <dd class="mt-1 text-sm text-gray-200 sm:mt-0 sm:col-span-2">
                                <ul role="list" class="border border-gray-200 rounded-md divide-y divide-gray-200">
                                    <li class="pl-3 pr-4 py-3 flex items-center justify-between text-sm">
                                        <div class="w-0 flex-1 flex items-center">
                                            <!-- Heroicon name: solid/paper-clip -->
                                            <svg class="flex-shrink-0 h-5 w-5 text-gray-400"
                                                 xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"
                                                 fill="currentColor" aria-hidden="true">
                                                <path fill-rule="evenodd"
                                                      d="M8 4a3 3 0 00-3 3v4a5 5 0 0010 0V7a1 1 0 112 0v4a7 7 0 11-14 0V7a5 5 0 0110 0v4a3 3 0 11-6 0V7a1 1 0 012 0v4a1 1 0 102 0V7a3 3 0 00-3-3z"
                                                      clip-rule="evenodd"/>
                                            </svg>
                                            <span class="ml-2 flex-1 w-0 truncate">
                        Пользовательское соглашение
                      </span>
                                        </div>
                                        <div class="ml-4 flex-shrink-0">
                                            <a href="/docs/1" class="font-medium text-indigo-900 hover:text-indigo-500">
                                                Открыть
                                            </a>
                                        </div>
                                    </li>
                                    <li class="pl-3 pr-4 py-3 flex items-center justify-between text-sm">
                                        <div class="w-0 flex-1 flex items-center">
                                            <!-- Heroicon name: solid/paper-clip -->
                                            <svg class="flex-shrink-0 h-5 w-5 text-gray-400"
                                                 xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"
                                                 fill="currentColor" aria-hidden="true">
                                                <path fill-rule="evenodd"
                                                      d="M8 4a3 3 0 00-3 3v4a5 5 0 0010 0V7a1 1 0 112 0v4a7 7 0 11-14 0V7a5 5 0 0110 0v4a3 3 0 11-6 0V7a1 1 0 012 0v4a1 1 0 102 0V7a3 3 0 00-3-3z"
                                                      clip-rule="evenodd"/>
                                            </svg>
                                            <span class="ml-2 flex-1 w-0 truncate">
                        Соглашение конфиденциальности
                      </span>
                                        </div>
                                        <div class="ml-4 flex-shrink-0">
                                            <a href="/docs/1" class="font-medium text-indigo-900 hover:text-indigo-500">
                                                Открыть
                                            </a>
                                        </div>
                                    </li>
                                </ul>
                            </dd>
                        </div>
                        <div class="bg-yellow-400 px-4 py-5 sm:px-6 flex justify-end">
                            <dd class="mt-1 text-sm text-gray-200 sm:mt-0 py-5">
                                <a class="p-4 border border-2 border-blue-500 rounded-lg text-black
                mx-1 bg-gray-500 bg-opacity-40 transition-colors duration-300 hover:bg-gray-700 hover:bg-opacity-60"
                                   href="/logout/">Выйти</a>
                                <a class="p-4 border border-2 border-white rounded-lg text-black
                mx-1 bg-gray-500 bg-opacity-40 transition-colors duration-300 hover:bg-gray-700 hover:bg-opacity-60"
                                   href="/account/modify/">Редактировать аккаунт</a>
                                <a class="p-4 border border-2 border-blue-500 rounded-lg text-black
                mx-1 bg-gray-500 bg-opacity-40 transition-colors duration-300 hover:bg-gray-700 hover:bg-opacity-60"
                                   href="/account/delete/">Удалить аккаунт</a>
                            </dd>
                        </div>
                    </dl>
                </div>
            </div>
        </div>
    </section>


<?php include_once ROOT . '/views/layouts/footer.php'; ?>